---
title: Context menu using a function for items
---

import siteConfig from '/docusaurus.config.js';

Instead of using an array, you can use a function that returns an array.

<SandpackEditor>

```ts
import canvasDatagrid from 'canvas-datagrid';
import data from '/data.json';

const app = document.getElementById('app');
const gridElement = document.createElement('div');
const grid = canvasDatagrid({
  parentNode: gridElement,
  data,
});

grid.addEventListener('contextmenu', function (e) {
  e.items.push({
    title: 'Function based child context menu item',
    items: function () {
      return [
        {
          title: 'I was added via a function',
          click: function () {
            return;
          },
        },
      ];
    },
  });
});

app.append(gridElement);
```

```json data.json
[
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" }
]
```

</SandpackEditor>
